<!--
@fucntion: 学生角色关联
-->
<template>
  <div class="components-system-studentrole">
    <el-row style="height:100%;">
      <el-col style="height:100%;" :xs="24" :sm="24" :md="12" :lg="12">
        <table-panel :name="'学生信息'" :columns="studentColumns" :tableData="studentData" :showRowNumber="true" 
        :currentPage="studentCurrentPage" :totalNum="studentTotalNum" @page-change="onPageChange('student',$event)" :pageSize="pageSize"
        :canEdit="false" :canDelete="false" :canExport="false" :canCreate="false"
        @table-searching="onSearching('student',$event)"
        @current-change="onSelectionChange('student',$event)"></table-panel>
      </el-col>
      <el-col style="height:100%;" :xs="24" :sm="24" :md="12" :lg="12">
        <simple-panel :panelTitle="'选择角色'" :hasToolbar="true">
          <template slot="toolbar">
            <el-button v-show="authorities.save" style="margin:7px 15px;" size="mini" @click="onSave">关联用户和角色</el-button>
          </template>
          <template slot="main">
            <el-table ref="roleTable" :data="roleData" :height="665" style="width: 100%" size="medium"
            order stripe border
            @selection-change="onSelectionChange('role',$event)">
              <el-table-column type="selection" width="50" fixed="left"></el-table-column>
              <el-table-column label="" type="index" width="50" fixed="left"></el-table-column>
              <template v-for="(col, index) in roleColumns">
                <el-table-column v-if="!col.hidden" :key="index" :prop="col.prop" :label="col.label" :width="col.width"
                :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                  <template slot-scope="scope">
                    <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                    </span>
                    <span v-else v-text="scope.row[col.prop]">
                    </span>
                  </template>
                </el-table-column>
              </template>
              <el-table-column label="编辑数据操作范围" width="140" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="onEditRange(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </simple-panel>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import TablePanel from "@/components/basic/TablePanel";
import SimplePanel from "@/components/basic/SimplePanel";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import {
  trueFalseRenderer,
  findRowsByKeys
} from "@/utils/tableutils.js";

//meta info
var student = "student";// 表格名称
var role = "role";
var columnsAttr = "Columns";// 列
var dataAttr = "Data";// 数据
var selectionAttr = "Selection";// 选中
var dlgVisibleAttr = "DlgVisible";// 对话框
var formAttr = "Form";
var recordAttr = "Record";// 表单模型
var rulesAttr = "Rules";// 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

//学生-列
var studentColumns = [
  {
    prop: "xsbh",
    label: "教师编号",
    outOfSearch:true,
    hidden: true
  },
  {
    prop: "xbh",
    label: "系编号",
    outOfSearch:true,
    hidden: true,
    rules: [{
      required: true,
      message: "必填", 
      trigger: "blur"
    }]
  },
  {
    prop:"xymc",
    label:"学院"
  },
  {
    prop:"xmc",
    label:"系"
  }, 
  {
    prop: "gh",
    label: "工号",
    rules: [{
      required: true,
      message: "必填", 
      trigger: "blur"
    },{ 
      max: 20, 
      message: "不超过20个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "xm",
    label: "姓名",
    rules: [{
      required: true,
      message: "必填", 
      trigger: "blur"
    },{ 
      max: 10, 
      message: "不超过10个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "sfds",
    label: "是否导师", 
    outOfSearch:true,
    hidden:true,
    rules: [{
      required: true,
      message:"必填",
      trigger: "blur"
    }]
  },
  {
    prop: "xb",
    label: "性别",
    width: 50,
    rules: [{
      required: true,
      message: "请选择性别",
      trigger: "blur"
    }]
  },
  {
    prop:"csrq",
    label:"出生日期",
    hidden:true,
    type:"date",
    rules:[{
      required: true,
      message: "请选择出生日期",
      trigger: "blur"
    }]
  },
  {
    prop: "zw",
    label: "职务",
    rules: [{
      required: true,
      message: "请选择职务",
      trigger: "blur"
    }]
  },
  {
    prop: "zc",
    label: "职称",
    rules: [{
      required: true,
      message: "请选择职称",
      trigger: "blur"
    }]
  },
  {
    prop: "yjfx",
    label: "研究方向",
    outOfSearch:true,
    hidden:true,
    rules: [{ 
      max: 10, 
      message: "不超过10个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "sj",
    label: "手机",
    hidden:true,
    rules: [{
      required: true,
      message: "必填",
      trigger: "blur"
    },{ 
      max: 20, 
      message: "不超过20个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "bgdh",
    label: "办公电话",
    hidden:true,
    rules: [{ 
      max: 20, 
      message: "不超过20个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "yx",
    label: "邮箱",
    hidden:true,
    rules: [{ 
      max: 20, 
      message: "不超过20个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "jsjs",
    label: "简历",
    outOfSearch:true,
    hidden:true
  },
  {
    prop: "zplj",
    label: "照片",
    outOfSearch:true,
    hidden:true
  },
  {
    prop: "rzsj",
    label: "入职时间",
    type:"date",
    hidden:true,
    rules: [{
      required: true,
      message:"必填",
      trigger: "blur"
    }]
  },
  {
    prop: "zzmm",
    label: "政治面貌",
    rules: [{
      required: true,
      message:"必填",
      trigger: "blur"
    }]
  },
  {
    prop: "jg",
    label: "籍贯",
    outOfSearch:true,
    hidden:true,
    rules: [{
      required: true,
      message:"必填",
      trigger: "blur"
    },{ 
      max: 100, 
      message: "不超过100个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "xw",
    label: "学位",
    hidden:true,
    rules: [{
        required: true,
        message: "请选择职称",
        trigger: "blur"
    }]
  },
  {
    prop: "xl",
    label: "学历",
    hidden:true,
    rules: [{
        required: true,
        message: "请选择职称",
        trigger: "blur"
    }]
  },
  {
    prop: "sxzy",
    label: "所学专业",
    outOfSearch:true,
    hidden:true,
    rules: [{ 
      max: 20, 
      message: "不超过20个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "byyx",
    label: "毕业院校",
    outOfSearch:true,
    hidden:true,
    rules: [{ 
      max: 50, 
      message: "不超过50个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "sfqy",
    label: "是否启用",
    type: "boolean",
    width: 80,
    outOfSearch: true,
    hidden:true,
    align: "center",
    headerAlign: "center",
    renderer: trueFalseRenderer
  },
  {
    prop:"yhm",
    label:"用户名"
  }
];

// 角色-列
var roleColumns = [
  {
  prop: "jsbh",
  label: "角色编号",
  hidden: true
  }, 
  {
    prop: "jsmc",
    label: "角色",
    width: 100
  }, 
  {
    prop: "jsms",
    label: "角色描述"
  },
  {
    prop:"sjczfw",
    label:"数据操作范围"
  }
];


export default {
  // 使用其他子组件
  components: {
    "table-panel": TablePanel,
    "simple-panel":SimplePanel
  },
  methods:{
    onSearching: function(tname, params) {// 查询
      var me = this;
      let url = "jcJsxxb";// /static/data/system/student.json

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.results;
              me[tname+totalNumAttr] = resp.data.total;
            }
        });
      }

    },
    onSelectionChange: function(tname, data) {// 选中改变
      var me = this;
      if(tname === student){
        // 缓存记录，按照角色编号，查询对应的选中权限节点数组
        me[tname+selectionAttr] = data;
        // 先清空上一次选中的
        me.$refs.roleTable.clearSelection();
        // 然后加载新的关联并显示 /static/data/system/studentroleSelected.json
        me.getRequest("/sysJsxxb/jsbhs",{
          yhm:data.yhm
        }).then((resp)=>{
          if(resp.status == 200){
            // 按照jsbh选中对应记录 resp.data.data
            let keys = me.arrUtil.transObjArrToSimpleArr(resp.data,"jsbh");
            let rows = findRowsByKeys(me[role+dataAttr],"jsbh", keys);
            rows.forEach(row => {
              me.$refs.roleTable.toggleRowSelection(row, true);
            });

          }else {
            me.$message.error("服务器读取错误，没有找到该用户所关联的角色！");
          }
        });
      }else if(tname === role){
        me[tname+selectionAttr] = data;
      }

    },
    onEditRange:function(row) {// 编辑数据操作范围
    var me = this;
      me.$message.info("暂时没有数据范围可操作");
    },
    onSave:function() {// 保存关联
      var me = this;
      var rolesSelected = me[role+selectionAttr];// 选中的角色们
      var studentSelected = me[student+selectionAttr];// 选中的用户
      // 验证
      if(rolesSelected.length < 1){
        me.$message.warning("请至少选择一个角色！");
        return;
      }
      console.log("studentSelected=",studentSelected);
      if(!studentSelected.yhm || studentSelected.yhm == ""){
        me.$message.warning("请选择一个用户！");
        return;
      }
      console.log("rolesSelected=",rolesSelected);
      let jsbhArr = [];
      for (let i = 0; i < rolesSelected.length; i++) {
        const role = rolesSelected[i];
        jsbhArr.push(role.jsbh);
      }

      // 发送数据 /static/data/testSuc.json
      me.postRequest("/jcYhxxb/sysYhjsglxxb",{
        yhm:studentSelected.yhm,
        jsbhs:jsbhArr.toString()
      }).then((resp)=>{
        if (resp.status == 200) {
          me.$message.success(resp.data.msg);
        } else{
          me.$message.error("服务器发生错误，代码：" + resp.status);
        }
      });
    }
  },
  data(){
    return {
      authorities:{
        save:true
      },// 权限控制
      [student+columnsAttr]: studentColumns,// 角色表格-列
      [student+dataAttr]: [],// 角色表格的数据
      [student+selectionAttr]:{},// 当前选中的角色
      [role+columnsAttr]: roleColumns,// 角色表格-列
      [role+dataAttr]: [],// 角色表格的数据
      [role+selectionAttr]:[],// 当前选中的角色
      [student+curPageAttr]:1,
      [student+totalNumAttr]:0,
      [student+qParamAttr]:{},
      pageSize:20,// 每页数量
    };
  },
  created: function() {
    var me = this;
    // 添加权限控制
    // me.authorities = me.$route.meta.authorities;

    // 一开始就加载角色列表
    me.getRequest("/sysJsxxb",{
    }).then((resp)=>{
      if(resp.status==200) {
        me[role+dataAttr] = resp.data;
      }else{
        me.$message.error("服务器发生错误，代码：" + resp.status);
      }
    });

    me.onSearching(student,{});
  }
}
</script>
<style lang="scss">

.components-system-studentrole{
  height:100%;
}

</style>
